<!-- vue基础框架 -->
<template>
    <div class="container">
        <div class="leftList">
            <div v-for="item in folderList" :key="item.folderName">
                {{ item.folderName }}
            </div>
        </div>
        <!-- 图片展示区域 -->
        <div class="ImageCenter">
            <div v-for="value in imagesList" class="ImageItem" :key="value.imagePath">
                <el-image style="width: 200px; height: 150px" :src="handleImage(value.imagePath)" fit="contain" lazy
                    @click="handleRightClick(value)" />
            </div>
        </div>
        <!-- 右侧抽屉 - 图片详情 -->
        <!-- :before-close="handleClose" 这是关闭时触发的函数备份（后续可能删除） -->
        <el-drawer v-model="drawerVisible" title="图片详情" direction="rtl" size="50%">
            <div class="drawer-content" v-if="selectedImage">
                <!-- 图片预览 -->
                <div class="image-preview">
                    <el-image style="width: 100%; height: 200px" :src="handleImage(selectedImage.imagePath)"
                        fit="contain" :preview-src-list="[handleImage(selectedImage.imagePath)]" />
                </div>

                <!-- 图片信息 -->
                <div class="image-info">
                    <el-descriptions :column="1" border>
                        <el-descriptions-item label="文件名">
                            {{ selectedImage.imageName || selectedImage.imagePath?.split('/').pop() }}
                        </el-descriptions-item>
                        <el-descriptions-item label="所属pdf">
                            <!-- {{ selectedImage.imagePath }} -->
                            <div class="flexCS">
                                <span @click="openSpecificPdf(selectedImage)"
                                    class="viewPdfBtn">&emsp13;查&emsp13;看&emsp13;</span>
                            </div>
                        </el-descriptions-item>
                        <!-- <el-descriptions-item label="所在文件夹">
                            {{ selectedImage.folder || activeName.value }}
                        </el-descriptions-item>
                        <el-descriptions-item label="图片尺寸">
                            {{ selectedImage.width || '未知' }} × {{ selectedImage.height || '未知' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="文件大小">
                            {{ selectedImage.fileSize || '未知' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="上传时间">
                            {{ selectedImage.uploadTime || '未知' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="描述">
                            {{ selectedImage.description || '无描述' }}
                        </el-descriptions-item> -->
                    </el-descriptions>
                    <!-- 分割线 -->
                    <el-divider border-style="dashed" />
                </div>
                <!-- 操作按钮 -->
                <div class="image-label">
                    <div class="labelTitle flexCC" @click="handleAddLabel">
                        添加标签
                        <SvgIcon :src="'/icons/add.svg'" size="20px"></SvgIcon>
                    </div>
                    <div class="label-list-container">
                        <!-- 如果有表单校验需求，可以包裹 el-form，否则可省略 -->
                        <el-form label-width="100px" class="label-form">
                            <div v-for="(item, index) in labelList" :key="index" class="label-item">
                                <!-- 编辑态：state == 1 -->
                                <template v-if="item.state === 1">
                                    <div class="form-row">
                                        <el-form-item label="图表标号">
                                            <el-input v-model="item.imageIndicia" placeholder="请输入图表标号" />
                                        </el-form-item>
                                    </div>

                                    <div class="form-row">
                                        <el-form-item label="图表类型">
                                            <el-select v-model="item.labelid" placeholder="请选择图表类型"
                                                style="width: 200px">
                                                <el-option v-for="label in labelData" :key="label.id"
                                                    :label="label.label" :value="label.id" />
                                            </el-select>
                                        </el-form-item>
                                    </div>

                                    <div class="form-row">
                                        <el-form-item label="处理进度">
                                            {{ getStateLabel(item.state) }}
                                        </el-form-item>
                                    </div>

                                    <div class="form-row">
                                        <el-form-item label="备注说明">
                                            <el-input v-model="item.remarks" type="textarea" :rows="3"
                                                placeholder="请输入备注说明" />
                                        </el-form-item>
                                    </div>

                                </template>

                                <!-- 查看态：state !== 1 -->
                                <template v-else>
                                    <div class="info-row">
                                        <span><strong>图表标号：</strong>【{{ item.imageIndicia }}】</span>
                                    </div>
                                    <div class="info-row">
                                        <span><strong>图表类型：</strong>【{{ getLabelLabel(item.labelid) }}】</span>
                                    </div>
                                    <div class="info-row">
                                        <span><strong>处理进度：</strong>【{{ getStateLabel(item.state) }}】</span>
                                    </div>
                                    <div class="info-row">
                                        <span><strong>备注说明：</strong>{{ item.remarks }}</span>
                                    </div>
                                </template>
                            </div>
                        </el-form>
                    </div>
                </div>
            </div>
        </el-drawer>
        <PdfViewer v-model="showPdfViewer" :pdf-url="pdfFileUrl" :background="true" width="80%" height="80%" />
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getFolderList, getImagesList } from '@/api/upload'
import { baseURL } from '@/utils/config';

const router = useRouter();
const activeName = ref('');//当前选中的期刊
const folderList = ref([]);// 期刊列表

// 获取文件夹（期刊）列表
const initFolderList = async () => {
    const res = await getFolderList();
    if (res.code == 1) {
        folderList.value = res.data;
    } else {
        ElMessage({
            message: res.msg,
            type: 'error',
        })
    }
}

// 分页参数
const page = ref({
    pageNum: 1,
    pageSize: 30,
    total: 0
})

// 图片列表
const imagesList = ref([]);

// 获取对应期刊内的图片列表
const getImagesListAxios = async () => {
    const data = {
        page: page.value.pageNum,
        pageSize: page.value.pageSize,
        folder: activeName.value
    }
    const res = await getImagesList(data);
    if (res.code == 1) {
        imagesList.value = res.data.images;
        page.value.total = res.data.total;
    } else {
        ElMessage({
            message: res.msg,
            type: 'error',
        })
    }
}

// 处理图片地址的函数
const handleImage = (url) => {
    return baseURL + url;
}


// 抽屉相关
const drawerVisible = ref(false);
const selectedImage = ref(null);
// 处理右键点击
const handleRightClick = (image) => {
    selectedImage.value = image;
    drawerVisible.value = true;
    console.log('右键点击的图片:', image);
}

// 关闭抽屉前的处理
const handleClose = (done) => {
    ElMessageBox.confirm('确认关闭图片详情窗口？')
        .then(() => {
            done();
        })
        .catch(() => {
            // 取消关闭
        });
}
// pdf查看展示功能===========================================
const pdfFileUrl = ref('')
const showPdfViewer = ref(false)
// 展示pdf
const openSpecificPdf = (data) => {
    pdfFileUrl.value = window.baseURL + '/pdf/' + data.folder_key + '/' + data.pdfName + '.pdf'
    showPdfViewer.value = true
}

const init = () => {
    initFolderList().then(() => {
        activeName.value = folderList.value[0]?.folderName;
        console.log(activeName.value);
        getImagesListAxios()
    })
}
// 标签相关功能=================================================
/** 标签列表（从后端获取） */
const labelData = ref([
    {
        id: 1,
        label: '热力图',
        color: ''
    }
])
const stateList = ref([
    {
        id: 1,
        label: '未处理',
        color: ''
    },
    {
        id: 2,
        label: '正在处理',
        color: ''
    }
])
/** 添加标签 */
const labelList = ref([
    {
        imageIndicia: 'A',
        labelid: 1,
        remarks: '文字说明',
        state: 2
    }
])
/** 添加标签 */
const handleAddLabel = () => {
    labelList.value.push({
        imageIndicia: '',
        labelid: '',
        remarks: '',
        state: 1
    })
}

/**辅助函数通过state返回对应label文字 */
const getStateLabel = (state) => {
    const stateItem = stateList.value.find(item => item.id === state);
    return stateItem ? stateItem.label : '';
}
const getLabelLabel = (labelid) => {
    const labelItem = labelData.value.find(item => item.id === labelid);
    return labelItem ? labelItem.label : '';
}


onMounted(() => {
    init();
});
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    height: 100vh; // 确保容器有固定高度

    .leftList {
        width: 200px;
        max-height: calc(100% - 100px);
        overflow-y: auto;
        border: 1px solid #eee;
        padding: 10px;

        // // 显示滚动条
        // &::-webkit-scrollbar {
        //     width: 4px;
        //     height: 4px;
        // }

        // &::-webkit-scrollbar-thumb {
        //     background-color: #ccc;
        //     border-radius: 4px;
        // }

        // &::-webkit-scrollbar-track {
        //     background-color: #f1f1f1;
        //     border-radius: 4px;
        // }
    }

    .ImageCenter {
        flex: 1;
        // 自己在flex元素中从顶部开始排列
        display: flex;
        flex-wrap: wrap;
        align-self: flex-start;
        overflow-y: auto; // 添加垂直滚动条
        max-height: calc(100% - 100px);

        .ImageItem {
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 5px;
            margin: 0 5px 5px 5px;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                transform: translateY(-2px);
            }
        }
    }
}

// 样式穿透
:deep(.el-drawer__header) {
    margin-bottom: 0;
}

:deep(.el-drawer__body) {
    margin-top: 0;
    padding-top: 0;
}

// 抽屉内容样式
.drawer-content {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .image-preview {
        margin-bottom: 20px;
        text-align: center;
        border: 1px solid #eee;
        border-radius: 5px;
        padding: 10px;
        background-color: #fafafa;
    }

    .image-info {
        margin-bottom: 10px;
        // flex: 1;

        :deep(.el-descriptions) {
            margin-top: 10px;

            .el-descriptions__body {
                background-color: #fff;
            }
        }

        .viewPdfBtn {
            cursor: pointer;
            border-bottom: 1px solid #666;
        }
    }

    .image-label {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 5px;

        // border-top: 1px solid #eee;
        .labelTitle {
            justify-content: flex-start;
            cursor: pointer;
            width: 100px;
            font-size: 18px;
        }

        .label-list-container {
            padding:0 20px;
            overflow-y: auto;
            height: calc(100vh - 540px);
            .label-item {
                border: 1px solid #e4e7ed;
                border-radius: 6px;
                padding: 10px 20px;
                padding-bottom: 5px;
                margin-bottom: 10px;
                background-color: #fafafa;
            }

            .form-row {
                margin-bottom: 10px;
            }

            .info-row {
                margin-bottom: 5px;
                line-height: 1.6;
            }

            :deep(.el-form-item) {
                margin-bottom:0;
            }
        }

    }
}
</style>